{extend name="public/layout" /}
{block name="head_css"}
    <style>
        .sam-header {
            background-color: #ff7200;
        }

        .sam-header .back,.sam-header .name,.sam-header .edit {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back {
            width: 20%;
            font-size: 0;
        }

        .sam-header .back>a .arrow,.sam-header .back>a .words {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back>a .arrow {
            width: 30%;
            padding-top: 30%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_arrow_back_fff.png');
        }

        .sam-header .back>a .words {
            font-size: 1rem;
        }

        .sam-header .name {
            width: 60%;
            font-size: 1rem;
            color: #fff;
            text-align: center;
        }

        .sam-header .edit {
            width: 20%;
            text-align: right;
            font-size: 1rem;
        }

        .sam-header .back>a,.sam-header .back>a:active {
            color: #fff;
            text-decoration: none;
        }

        .sam-header .edit>a,.sam-header .edit>a:active {
            color: #333;
            text-decoration: none;
        }
        .sam-header .icon {
            display: inline-block;
            width: 5%;
            padding-top: 5%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_header_list_fff.png');
            margin-right: 1%;
        }
        .submit-btn {
            width: 90%;
            box-sizing: border-box;
            padding: 2px 0;
            background-color: #ff7200;
            font-size: 0;
            color: #fff;
            text-align: center;
            margin: 15px auto 0 auto;
            border-radius: 1rem;
        }

        .submit-btn .icon,.submit-btn .words {
            display: inline-block;
            vertical-align: middle;
        }

        .submit-btn .icon {
            width: 10%;
            padding-top: 10%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_btn_publish_fff.png');
            transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
        }

        .submit-btn .words {
            max-width: 50%;
            font-size: .9rem;
        }
    </style>
{/block}

{block name="main"}
    <div class="container sam-header">
        <div   class="back">
            <a href="{$back_url}">
                <div class="arrow"></div>
            </a>
        </div>
        <div class="name">  <img style="width: 1.5rem" src="/static/index/image/icon_header_list_fff.png">信息发布</div>
    </div>
    <form id="form" action="{:url('insert')}" method="post">
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>发布类型</div>
            <div class="right">
                <div class="select-text">{$vo.engineering_type}</div>
                <div class="select-arrow"></div>
                <select name="engineering_type" class="hide-select">
                    {foreach name="$type_list" item="item"}
                        <option {if condition="$vo.engineering_type eq $item.name"} selected {/if} value="{$item.id}">{$item.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>标题</div>
            <div class="right">
                <input type="text" name="title" placeholder="请用一句话描述你要发的内容" value="{$vo.title}" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>联系人</div>
            <div class="right">
                <input type="name" name="contacts" placeholder="请填写联系人姓名" value="{$vo.contacts}" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>*</span>电话号码</div>
            <div class="right">
                <input  name="mobile" placeholder="请填写联系电话号码" value="{$vo.mobile}" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>&nbsp;&nbsp;</span>详情</div>
            <div class="right">
                <textarea name="detail" placeholder="请填写详情信息" rows="5">{$vo.detail}</textarea>
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>&nbsp;&nbsp;</span>图片</div>
            <div class="right">
                <div class="sam-image-uploader">
                    <input type="file" name="images" accept="image/jpeg,image/jpg,image/png" value="" />
                </div>
                {foreach name="$vo.imgs" key='key' item="item"}
                    <input  name="img[{$key}]" type="hidden" value="{$item.path}">
                    <div class="sam-image-shower" style="background-image: url({$item.path});"><div class="sam-image-cross" onclick="deleteUploadImage(this);">删除</div></div>
                {/foreach}
            </div>
            <div class="tips">注意：图片不能超过3张</div>
        </div>

        <div id="submit" class="submit-btn">
            <div class="icon"></div>
            <div class="words">立即免费发布</div>
        </div>
        {if condition="$vo.id"}
            <input type="hidden" name="id" value="{$vo.id}">
        {/if}
    </form>
{/block}
{block name="footer"}
{/block}
{block name="script"}
    <script src="/static/index/js/qiniu.js?v={$version}"></script>
    <script>
        /*
         * 这部分可以写成外部引入公用
         * */
        {if isset($vo) && is_array($vo.imgs)}
        var img_length = {:count($vo.imgs)};
        var img_index = {:count($vo.imgs)};
        {else}
        var img_length = 0;
        var img_index = 0;
        {/if}
        if(img_length >= 3){
            $('.sam-image-uploader').hide();
        }
        {if condition="empty($vo.id)"}
        $('.sam-form-line .right>.select-text').each(function(index,elm) {
            $(elm).text($(elm).siblings('select').eq(0).find("option[value='2']").eq(0).text());
        });
        {/if}
        $('.sam-form-line .right>select').change(function(e) {
            selVal = $(this).val();
            selText = $(this).siblings('.select-text').eq(0);
            if(selVal === '-1') {
                selText.removeClass('chosen');
                selText.text($(this).find("option[value='-1']").eq(0).text());
            }else{
                selText.addClass('chosen');
                selText.text($(this).find('option:selected').text());
            }
        });


        var ImageExt = ['image/jpeg','image/jpg','image/png'];

        $('.sam-image-uploader').find('input[type=file]').click(function(e) {
            e.stopPropagation();
        });

        $('.sam-image-uploader').click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).find('input[type=file]').click();
        });

        $('.sam-image-uploader').find('input[type=file]').change(function(e) {
            var file = this.files[0];
            if(!file) {
                alert('没有上传文件');
                return false;
            }else if(img_length >= 3){
                alert('最多上传3张图片');
                return false;
            }else if(ImageExt.indexOf(file.type) < 0) {
                alert('不支持的图片格式');
                return false;
            }else if(file.size > 5242880) {
                alert('上传的图片不能超过5M');
                return false;
            }
            var _this = $(this);
            var observable = qiniu.upload(file,null, '{$token}');
            var observer = {
                error(err){
                    alert('上传失败');
                },complete(res){
                    _this.parent('.sam-image-uploader').parent('.right').append('<input name="img['+img_index+']" type="hidden" value="{$domain}/'+res.key+'">' +
                        '<div class="sam-image-shower"  style="background-image: url({$domain}/' + res.key + ');">' +
                        '<div class="sam-image-cross" onclick="deleteUploadImage(this);">删除</div>' +
                        '</div>');
                    img_length ++;
                    img_index ++;
                    if(img_length >= 3) _this.parent('.sam-image-uploader').hide();
                    _this.val('');
                }
            };
            observable.subscribe(observer);
        });

        function deleteUploadImage(elm) {
            if(!elm) return false;
            $(elm).parent().prev().remove();
            var shower = $(elm).parent('.sam-image-shower');
            img_length--;
            if(img_length < 3) shower.siblings('.sam-image-uploader').eq(0).show();
            shower.remove();
        }
        $('#submit').on('click',function(){
            var obj = $("#form").serializeArray();
            $.post('{$action}',obj,function(data){
                if(data.code != 1){
                    alert(data.msg);
                }else{
                    alert('发布成功');
                    self.location=document.referrer;
                }
            });
        });
        /*
         * 这部分可以写成外部引入公用 END
         * */
    </script>
{/block}
